<template>
  <div class="u-popup">
    <div class="u-transition u-fade-enter-to u-fade-enter-active main1">
      <div
        class="main2 u-transition u-fade-zoom-enter-to u-fade-zoom-enter-active"
      
      >
        <div class="u-popup__content">
          <transition
            name="bounce"
            enter-active-class="bounceInLeft"
            leave-active-class="bounceOutRight"
          >
            <div
              class="buy-dialog bc-dark"
              :style="{ backgroundImage:bgUrl}"
             
              v-if="showPop"
            >
              <div class="buy-dialog-top">
                <div class="box-name">EXCLUSIVE</div>
                <img
                  class="buy-cover"
                  src="https://img.fcgbox.com/copy/box/115.webp"
                />
                <div class="num-box">
                  <div class="u-number-box">
                    <div class="number-box-btn sub">-</div>
                  </div>
                  <div class="u-number-box__input">
                    <van-field v-model="count" type="digit"  />

                  </div>
                  <div class="u-number-box">
                    <div class="number-box-btn add">+</div>
                  </div>
                </div>
              </div>
              <div class="p-btn">
                <div class="buy-btn"><span>$19.98 Each</span></div>
              </div>
              <div class="btn-content">
                <div
                  class="btn-item btn-item-1"
                  :class="'btn-item-' + item"
                  v-for="(item, index) in [1, 2, 3, 4]"
                  :key="index"
                >
                  <div class="lian-btn-tip">Discount:$2.00</div>
                  <div class="lian-btn-text">
                    5 Rounds<span class="yh-text">$97.90</span>
                  </div>
                </div>
              </div>
            </div>
          </transition>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "pup",
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    showPop: {
      type: Boolean,
      default: () => true,
    },
  },
  computed: {
    bgUrl(){
      if (this.theme==1) {
        return "url(/static/img/box/buy_bc.png)"
      }
      return "url(/static/img/box/open_bc_dark.png)"
    },
    ...mapState([
      "theme",])
    },
  data() {
    return {
      count: 1,
    };
  },
  methods: {
    closePop() {
      this.$emit("closePop");
    },
  },
};
</script>

<style lang="scss" >
.u-popup{
    .van-cell {
        // background: #000;
        background: transparent;
    }
    .van-field__control{
      color:   #f0b354
    }

}
</style>

<style lang="scss" scoped>
@keyframes scale-item-data-v-2bff2dce {
  0% {
    -webkit-transform: translate(-22px, -5px) scale(0.8) rotate(-10deg);
    transform: translate(-22px, -5px) scale(0.8) rotate(-10deg);
  }
  100% {
    -webkit-transform: translate(-22px, -5px) scale(1) rotate(-20deg);
    transform: translate(-22px, -5px) scale(1) rotate(-20deg);
  }
}
.u-popup {
    // z-index: 10000;
    height: 397px;
    width: 357px;
    background: transparent;
  //     animation: fade; /* referring directly to the animation's @keyframe declaration */
  //   animation-duration: 2s; /* don't forget to set a duration! */
  flex: 1;
  .u-fade-enter-active,
  .u-fade-leave-active {
    transition-property: opacity;
  }
  .u-fade-zoom-enter-active,
  .u-fade-zoom-leave-active {
    transition-property: opacity, -webkit-transform;
    transition-property: transform, opacity;
    transition-property: transform, opacity, -webkit-transform;
  }
  .main1 {
    transition-duration: 350ms;
    transition-timing-function: ease-out;
    position: fixed;
    inset: 0px;
    z-index: 10070;
    background: transparent;
    .main2 {
      transition-duration: 300ms;
      transition-timing-function: ease-out;
      z-index: 10075;
      position: fixed;
      display: flex;
      align-items: center;
      justify-content: center;
      inset: 0px;
      background: transparent;
    }
  }

  .u-popup__content {
    background-color: #fff;
    position: relative;
    background-color: transparent;

    .bc-dark {
    //   background-image:var(--pop-bg);
    }
    .buy-dialog {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      width: 357px;
      height: 397px;
      background-size: 100% 100%;
      padding: 11px 11px;
      box-sizing: border-box;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: column;
      .buy-dialog-top {
        width: 100%;
        height: 143px;
        position: relative;
        z-index: 9;
        .box-name {
          width: 182px;
          color: #ff2300;
          font-size: 24px;
          font-weight: 700;
          position: absolute;
          top: 8px;
          left: -7px;
          text-align: center;
          font-style: italic;
          font-weight: 700;
          text-shadow: 1px 1px 0 #f2f2f2;
          z-index: 2;
          line-height: 1;
        }
        .box-name::before {
          content: "";
          position: absolute;
          width: 110px;
          height: 6px;
          bottom: 5px;
          left: 50%;
          -webkit-transform: translate(-50%);
          transform: translate(-50%);
          background: linear-gradient(
            90deg,
            hsla(0, 0%, 100%, 0),
            #fff,
            hsla(0, 0%, 100%, 0)
          );
          z-index: -1;
        }
        .buy-cover {
          width: 176px;
          height: 176px;
          position: absolute;
          top: 11px;
          right: -11px;
          -webkit-transform: translateY(-30%);
          transform: translateY(-30%);
        }
        .num-box {
          height: 36px;
          display: flex;
          justify-content: center;
          align-items: center;
          border: 1px solid #f0b354;
          position: absolute;
          left: 22px;
          top: 77px;
          .u-number-box {
            display: flex;
            flex-direction: row;
            align-items: center;
            .number-box-btn {
              width: 36px;
              height: 36px;
              display: flex;
              justify-content: center;
              align-items: center;
            }
            .sub {
              border-right: 1px solid rgb(240, 179, 84);
              color: rgb(240, 179, 84);

              font-size: 26px;
            }
            .add {
              border-left: 1px solid rgb(240, 179, 84);
              color: rgb(240, 179, 84);
              font-size: 26px;
            }
          }

          .u-number-box__input {
            position: relative;
            text-align: center;
            font-size: 15px;
            padding: 0;
            margin: 0 2px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            color: rgb(240, 179, 84);
            background-color: rgba(0, 0, 0, 0);
            height: 30px;
            width: 49px;
          }
        }
      }
      .p-btn {
        padding: 0px 11px;
        width: 100%;
        box-sizing: border-box;
      }
      .buy-btn {
        width: 100%;
        height: 48px;
        background-image: url(/static/img/box/buy_one.png);
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 19px;
        color: #fff;
        margin-top: 11px;
        margin-bottom: 16px;
      }

      .btn-content {
        width: 100%;
        padding: 0 11px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        .btn-item {
          width: 149px;
          height: 43px;
          margin: 8px 0;
          display: flex;
          color: #fff;
          font-size: 13px;
          justify-content: center;
          align-items: center;
          background-size: 100% 100%;
          position: relative;
          .lian-btn-tip {
            position: absolute;
            z-index: 9;
            font-size: 9px;
            padding: 1px 3px;
            color: #fff;
            border-radius: 3px;
            background-color: #ff2350;
            -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
            margin-right: 5px;
            left: 0;
            top: -5px;
            -webkit-animation: scale-item-data-v-2bff2dce 2s ease-in infinite
              alternate;
            animation: scale-item-data-v-2bff2dce 2s ease-in infinite alternate;
          }
          .lian-btn-text {
            font-weight: 700;
            .yh-text {
              font-weight: 300;
            }
          }
        }
        .btn-item-1 {
          background-image: url(/static/img/box/buy_5.png);
        }
        .btn-item-2 {
          background-image: url(/static/img/box/buy_10.png);
        }
        .btn-item-3 {
          background-image: url(/static/img/box/buy_50.png);
        }
        .btn-item-4 {
          background-image: url(/static/img/box/buy_100.png);
        }
      }
    }
  }
}
</style>